<template>
  <div
    class="h-[70px] bg-[url('/images/header_bg.png')] bg-cover bg-no-repeat pr-5 relative flex items-center justify-between"
  >
    <img src="../../assets/images/line.png" class="absolute top-10 -left-10" alt="" />
    <div class="title text-3xl p-5 px-10 tracking-[5px]">{{ title }}</div>
    <popover placement="bottom">
      <template #reference
        ><img
          src="../../assets/images/photo.png"
          class="rounded-full w-10 h-10 cursor-pointer"
          alt=""
      /></template>
      <div class="w-[100px] overflow-hidden text-white text-sm">
        <div
          class="flex items-center justify-center p-2 cursor-pointer rounded hover:bg-[#19a2e8]/80"
          @click="router.push('/')"
        >
          首页
        </div>
        <div
          class="flex items-center justify-center p-2 cursor-pointer rounded hover:bg-[#19a2e8]/80"
          @click="router.push(permissionStore.firstRoutePath)"
        >
          系统管理
        </div>
        <div
          class="flex items-center justify-center p-2 cursor-pointer rounded hover:bg-[#19a2e8]/80"
          @click="logout"
        >
          退出登录
        </div>
      </div>
    </popover>
  </div>
</template>

<script setup>
// import { useUserStore } from '@/stores/modules/user.js'
import { usePermissionStore } from '@/stores/modules/permission'
import { useRouter } from 'vue-router'
const props = defineProps({
  title: {
    type: String,
    required: true
  }
})
const router = useRouter()
// const userStore = useUserStore()
const permissionStore = usePermissionStore()
const logout = () => {
  // userStore.Logout()
}
</script>

<style lang="scss" scoped>

</style>
